<template>
  <div>
    <!-- <mySlot msg="黑马程序员">
      <h1>啦啦</h1>
      <button>你好</button>
    </mySlot>
    <mySlot msg="传智教育">
      <p>holle</p>
    </mySlot>
    <mySlot msg="202教室">
      <textarea></textarea>
    </mySlot>
    <mySlot msg="202教室"></mySlot> -->
    <!-- <mySlot>
      <template v-slot:header>
        <div>我是标题</div>
      </template>
      <template v-slot:default>
        <div>我是内容</div>
      </template>
      <template v-slot:footer>
        <div>我是页脚</div>
      </template>
    </mySlot> -->
    <MyDialog>
      <template #header="{ msg, xing }">
        <h4>
          相思
          {{ msg }}{{ xing }}
        </h4>
      </template>
      <template #main>
        <div>
          <P>红豆生南国,</P>
          <P>春来发几枝.</P>
          <P>愿君多采撷,</P>
          <P>此物最相思.</P>
        </div>
      </template>
    </MyDialog>
    <MyDialog>
      <template #header="{ msg }">
        <h4>回乡偶书 {{ msg }}</h4>
      </template>
      <template #main>
        <div>
          <P>少小离家老大回,</P>
          <P>乡音无改鬓毛衰.</P>
          <P>儿童相见不相识,</P>
          <P>笑问客从何处来.</P>
        </div>
      </template>
    </MyDialog>
  </div>
</template>

<script>
// 插槽解决什么问题的?
// [封装组件的时候，如果组件内部的结构不确定，需要调用组件的时候动态传入结构，用到了插槽slot]
// 用法: 组件内部不确定的地方提供slot标签进行占位
// 使用组件的时候，标签之间可以动态传入内容传入的结构会在组件内部slot的地方进行展示

// 如果组件内部多个地方的结构不确定，具名插槽
// 给slot一个name属性 (slot起个名字)
// 父组件传入结构的时候，temolate加一个v-Solt:插名字，就会把当前template包惠结构、渲染到组件内部slot的name属性同名的地方

// 如果使用组件的时候没有为插槽提供内容，可以在组件的sLot组件中间提供默认内容<sLot>提供默认的展示内容</slot>
// 给插槽起名字
import mySlot from '@/components/my-slot.vue'
import MyDialog from '@/components/my-dialog.vue'
export default {
  components: {
    mySlot,
    MyDialog,
  },
  // data() {
  //   return {
  //     msg:''
  //   }
  // }
}
</script>

<style></style>
